<%--
  Created by IntelliJ IDEA.
  User: Hasee
  Date: 2019/11/21
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的贷款</title>
    <style type="text/css">
        #imgPreview {
            width: 40%;
            height: 180px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }

        #prompt3 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
            display: block;
        }

        #imgSpan {
            position: absolute;
            top: 60px;
            left: 40px;
        }

        .filPath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        #img3 {
            height: 100%;
            width: 100%;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
    function test() {
        $("#prompt3").css("display", "none");
        var reads = new FileReader();
        var f = document.getElementById("file").files[0];
        reads.readAsDataURL(f);
        reads.onload = function (e) {
            e = document.getElementById("img3").src = this.result;
            $("#img3").css("display", "block");
        }
    }
</script>
<body>
<div id="imgPreview">
    <div id="prompt3">
            <span id="imgSpan">
                点击上传
                <br>
                <i class="aui-iconfont aui-icon-plus"></i>
            </span>
        <input type="file" id="file" class="filPath" onchange="test()"
               accept="image/*">
    </div>
    <img src="#" id="img3">
</div>
</body>
</html>
